<template>
	<z-paging ref="paging" v-model="orderList" @query="queryList">
		<template #top>
			<!-- 搜索 + 筛选 -->
			<view class="filter-header">
				<uni-search-bar v-model="keywords" @confirm="onSearch" @clear="onSearch" placeholder="订单号/客户名/收货人" :autoFocus="false" class="search-bar" />
				<view class="filter-btn" @click="openFilterModal">
					<uni-icons type="gear" size="18" color="#999" />
					<text class="btn-text">筛选</text>
				</view>
			</view>
		</template>
		<!-- 自定义空布局 -->
		<template #empty>
			<view class="empty-tip">暂无订单数据</view>
		</template>
		<!-- 订单卡片列表 -->
		<view class="order-cards">
			<view v-for="order in orderList" :key="order.orderId" class="order-card">
				<!-- 订单信息 -->
				<OrderInfoSlot :row="order" @copy="copyOrderId" />

				<!-- 收货人信息 -->
				<LogisticsSlot :row="order" @copy="copyReceiver" @payHistory="onPayHistory" />

				<!-- 业务员信息 -->
				<SalesmanSlot :row="order" />

				<!-- 下单时间 & 平台 -->
				<OrderTimerSlot :row="order" />

				<!-- 物流状态 -->
				<LogisticsStatusSlot :row="order" @viewLogistics="viewLogisticsDetail" />

				<!-- 类别 & 是否加微信 -->
				<!-- <view class="extra-info">
					<CategorySlot :row="order" @change="onCategoryChange" />
					<WechatSlot :row="order" @change="onWechatChange" />
				</view> -->

				<!-- 备注 -->
				<RemarkSlot :row="order" @showCustomerFollowUp="showCustomerFollowUp" type="1" />
				<!-- 操作按钮 -->
				<!-- <view class="action-footer">
					<uni-icons type="compose" size="16" color="#007AFF" @click="onEdit(order)" />
					<text class="edit-text" @click="onEdit(order)">编辑</text>
				</view> -->
			</view>
		</view>
	</z-paging>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import OrderInfoSlot from '@/components/OrderInfoSlot.vue';
import LogisticsSlot from '@/components/LogisticsSlot.vue';
import SalesmanSlot from '@/components/SalesmanSlot.vue';
import OrderTimerSlot from '@/components/OrderTimerSlot.vue';
import LogisticsStatusSlot from '@/components/LogisticsStatusSlot.vue';
import CategorySlot from '@/components/CategorySlot.vue';
import WechatSlot from '@/components/WechatSlot.vue';
import RemarkSlot from '@/components/RemarkSlot.vue';

import FilterModal from '@/components/FilterModal.vue';
import CustomerFollowUp from '@/components/CustomerFollowUp.vue';
import PlatformAddOrder from '@/components/PlatformAddOrder.vue';
import { listOrder } from '../../api/order/list';

// refs
const paging = ref();
const filterModalRef = ref();
const customerFollowUpRef = ref();
const platformAddOrderRef = ref();

// 数据
const orderList = ref<any[]>([]);
const keywords = ref('');
const filters = ref({});

// 查询列表（z-paging 调用）
const queryList = async (pageNo: number, pageSize: number) => {
	console.log('	ColorGradient ========> ', pageNo, pageSize);
	// TODO: 调用你的 API
	const res = await listOrder({ pageNum: pageNo, size: pageSize });
	console.log('res ===========》 ', res);
	paging.value?.complete(res.rows);
};

// 搜索
const onSearch = () => {
	paging.value?.reload();
};

// 打开筛选
const openFilterModal = () => {
	filterModalRef.value?.open(filters.value);
};

// 筛选提交
const onFilterSubmit = (data: any) => {
	filters.value = data;
	paging.value?.reload();
};

// 复制订单号
const copyOrderId = (id: string) => {
	uni.setClipboardData({ data: id });
};

// 复制收货人信息
const copyReceiver = (order: any) => {
	const text = `${order.receiverName} ${order.receiverPhone} ${order.receiverAddress}`;
	uni.setClipboardData({ data: text });
};

// 查看支付历史
const onPayHistory = (order: any) => {
	// 打开用户下单记录
	// customerOrderHistoryRef.value.open(order.customerId)
};

// 查看物流详情
const viewLogisticsDetail = (order: any) => {
	uni.navigateTo({
		url: `/pages/logistics/detail?no=${order.logisticsNo}`
	});
};

// 编辑订单
const onEdit = (order: any) => {
	platformAddOrderRef.value.open(order, 'edit');
};

// 显示跟进详情
const showCustomerFollowUp = (order: any, type: number) => {
	customerFollowUpRef.value.open(order.customerId, type);
};

// 分类/微信变更（可提交到后台）
const onCategoryChange = (val: number, order: any) => {
	console.log('类别变更:', val, order.orderId);
	// TODO: 调用 API 更新
};
const onWechatChange = (val: number, order: any) => {
	console.log('是否加微信变更:', val, order.orderId);
	// TODO: 调用 API 更新
};
</script>

<style lang="scss">
@import './order.scss';
</style>